<template>
  <view class="page-body">
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        示例1
        <text>\n movable-view区域小于moveable-area</text>
      </view>
      <movable-area>
        <movable-view
          :x="x"
          :y="y"
          :scale="scale"
          direction="all"
          @change="onChange"
        >
          test
        </movable-view>
      </movable-area>
      <view class="uni-link uni-center uni-common-mt" @tap="tap">
        点击这里移动至(30px, 30px)
      </view>

      <view
        >示例2
        <text>\n movable-view区域大于moveable-area</text>
      </view>
      <movable-area>
        <movable-view direction="all" class="max"> test2 </movable-view>
      </movable-area>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        x: 0,
        y: 0,
        scale: 1,
      };
    },
    methods: {
      onChange(e) {
        this.x = e.detail.x;
        this.y = e.detail.y;
        this.scale = e.detail.scale;
      },
      tap() {
        this.x = 30;
        this.y = 30;
      },
    },
  };
</script>

<style>
  movable-area {
    background-color: aliceblue;
    height: 400rpx;
    width: 100%;
  }
  movable-view {
    background-color: blue;
    color: white;
    width: 200rpx;
    height: 200rpx;
    line-height: 40rpx;
    text-align: center;
    align-items: center;
    align-content: center;
    font-size: 50rpx;
  }
  .max {
    height: 400rpx;
  }
</style>
